<script lang="ts">
import {ref, shallowRef} from "vue";

export default {
  setup() {
    // 深层的ref响应式
    const count = ref({
      count: 0
    })

    // 浅层的ref响应式
    const age = shallowRef({
      age: 0
    })

    const handleAddCount = () => {
      count.value.count++
    }

    const handleAddAge = () => {
      // 不生效shallowRef定义的ref是浅层的响应式
      age.value.age++
    }

    return {
      count,
      handleAddCount,
      age,
      handleAddAge
    }
  },
}
</script>

<template>
  <h1 @click="handleAddCount">{{ count.count }}</h1>
  <h1 @click="handleAddAge">{{ age.age }}</h1>
</template>

